<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<meta name="keywords" content="jquery,ui,easy,easyui,web">
	<meta name="description" content="easyui help you build your web page easily!">
	<title>列举css中所有图标 - jQuery EasyUI</title>
	<link rel="stylesheet" type="text/css" href="../static/jlib/easyui/1.5/themes/default/easyui.css">
	<link rel="stylesheet" type="text/css" href="../static/jlib/easyui/1.5/themes/icon.css">
	<script type="text/javascript" src="../static/jlib/jquery/1.11.2/jquery.min.js"></script>
	<script type="text/javascript" src="../static/jlib/easyui/1.5/jquery.easyui.min.js"></script>
	<link rel="stylesheet" type="text/css" href="../static/css/myicon.css">
	<link rel="stylesheet" type="text/css" href="../static/css/icon.css">
	<style type="text/css">
	.tree-indent {
		width: 5px;
	}
	.graystyle {
		color: #C0C0C0;
	}
	</style>
	<script type="text/javascript">
function getStyleSheets() {
	var data = [];
	data[data.length] = {id: -1, text: "全部"};
	for ( var i = 0; i < document.styleSheets.length; i++) {
		var url = document.styleSheets[i].href;
		if (url) {
			data[data.length] = {
				id: i, 
				text: url.substr(url.lastIndexOf("/") + 1)
			};
		}
	}
	return data;
}

function getAllIcons() {
	var keyword = $("#keyword").val();
	var data = [];
	for ( var i = 0; i < document.styleSheets.length; i++) {
		data = $.merge(data, getIcons(i, keyword));
	}
	return data;
}

function getIcons(index, keyword) {
	var data = [];

	var styleSheet = document.styleSheets[index];

	var rules;
	if (styleSheet.cssRules) {
		rules = styleSheet.cssRules;
	} else {
		rules = styleSheet.rules;
	}
	for ( var j = 0; j < rules.length; j++) {
		var selector = rules[j].selectorText;
		if(selector.indexOf(keyword)==-1) {
			continue;
		}

		// 样式中，规约以".icon-"开头的即为图标
		if (selector.substr(0, 6) == ".icon-") {
			data[data.length] = {
				id: index + "-" + j, 
				text: selector.substr(1),
				iconCls: selector.substr(1), 
				href: (styleSheet.href ? styleSheet.href : "")
			};
		}
		// 样式中，规约以".i-"开头的即为图标
		else if (selector.substr(0, 3) == ".i-") {
			data[data.length] = {
				id: index + "-" + j, 
				text: selector.substr(1),
				iconCls: selector.substr(1), 
				href: (styleSheet.href ? styleSheet.href : "")
			};
		}
	}

	return data;
}


$(function() {
	$("#data-grid").treegrid({
		idField: "id",
		treeField: "iconCls",
		rownumbers: true,
		striped: true,
		singleSelect: true,
		width: 800,
		height: 500,
		//fit: true,
		fitColumns: true,
		autoRowHeight: true,
		columns: [[{
				field: "iconCls", 
				title: "IconCls", 
				halign: "center", 
				width: 60,
				formatter: function(value, row, index) {
					return "";
				}
			}, {
				field: "id", 
				title: "ID", 
				halign: "center", 
				width: 60,
				hidden: true
			}, {
				field: "text", 
				title: "Text", 
				halign: "center", 
				width: 100
			}, {
				field: "href", 
				title: "Href", 
				halign: "center", 
				width: 200
			}
		]]
	});

	$("#css-list").combotree({
		data: getStyleSheets(),
		onClick: function(node) {
			var keyword = $("#keyword").val();
			var id = node.id;
			var data = id<0 ? getAllIcons() : getIcons(id, keyword);
			$("#data-grid").treegrid("loadData", data);
		},
		onLoadSuccess : function(node,data) {
			$('#css-list').combotree('setValue', -1);

			var data = getAllIcons();
			$("#data-grid").treegrid("loadData", data);
		}
	});

	$("#btnSearch").click(function() {
		var keyword = $("#keyword").val();
		var id = $("#css-list").combotree("getValue");
		var data = id<0 ? getAllIcons() : getIcons(id, keyword);
		$("#data-grid").treegrid("loadData", data);
	});
/*
	$(".event-test").click(function() {
		alert($(this).html());
	});*/

	$(".event-add-class").click(function() {
		$(".event-test").removeClass("graystyle");
		$(".event-test").addClass("graystyle");

		initEvent(true);
	});

	$(".event-remove-class").click(function() {
		$(".event-test").removeClass("graystyle");

		initEvent(false);
	});
});

function initEvent(bind) {
	if(bind) {
		$(".event-test").on("click", function() {
			alert("运行事件");
		});
	} else {
		$(".event-test").unbind("click");
	}
}
	</script>
</head>
<body>
	样式文件列表:<br />
	<input id="css-list" style="width:200px;"><input type="text" id="keyword" value=""><input type="button" id="btnSearch" value="查询">

	<br /><br />
	EasyUI图标TreeGrid展示:<br />
	<table id="data-grid"></table>

	<div class="event-test">事件测试</div>
	<div class="event-add-class">添加样式</div>
	<div class="event-remove-class">移除样式</div>
</body>
</html>